<template>
  <div>
    <p class="forgetPass_p"></p>
    <ul class="forgetPass_ul">
      <li>
        <img src="https://www.zhaoshengku.net/sjhtb.png" alt />
        <input type="text" name id placeholder="请输入您的手机号" v-model.lazy="phoneUser" @blur="phoneU" placeholder-class="placeholder" />
        <p v-if="phobv==2">手机号码格式错误</p>
      </li>
      <li>
        <img src="https://www.zhaoshengku.net/wx-tuoyuantwosssss.png" alt />
        <input type="text" placeholder="请输入验证码" v-model.lazy="phonePass" placeholder-class="placeholder" />
        <span @click="focusyanz" v-html="yanzhtml">获取验证码</span>
      </li>
      <li>
        <img src="https://www.zhaoshengku.net/wx-jianpankaob.png" alt />
        <input
          type="password"
          name
          id
          placeholder="请输入密码"
          v-model.lazy="inputPass"
          @blur="zzpasswold"
          placeholder-class="placeholder"
        />
        <p v-if="inputPassisshow">密码由字母和数字组成</p>
      </li>
      <li>
        <img src="https://www.zhaoshengku.net/wx-jianpankaob.png" alt />
        <input
          type="password"
          name
          id
          placeholder="请输入密码"
          v-model.lazy="inputPassTwo"
          @blur="yanztwomimas"
          placeholder-class="placeholder"
        />
        <p v-if="yanztwomima">两次密码输入不一致</p>
      </li>
      <li>
        <img src="https://www.zhaoshengku.net/wx-cgngzhi.png" alt @click="forgetpass" />
      </li>
    </ul>
  </div>
</template>

<script scoped>
export default {
  data() {
    return {
      phoneUser: "",
      phonePass: "",
      inputPass: "",
      inputPassisshow: false,
      inputPassTwo: "",
      phobv: 1,
      yanztwomima: false,
      yanzmiao: 60,
      yanzhtml: "获取验证码"
    };
  },
  mounted() {
    wx.setNavigationBarTitle({
      title: "找回密码"
    });
  },
  methods: {
    phoneU() {
      if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.registerMedia)) {
        this.phobV = 2;
      } else {
        this.phobV = 1;
      }
    },
    focusyanz() {
      if (this.yanzmiao === 60) {
        var times = setInterval(() => {
          this.yanzmiao = this.yanzmiao - 1;
          this.yanzhtml = this.yanzmiao + "秒后重新获取";
          if (this.yanzmiao === 0) {
            this.yanzhtml = this.yanzmiao + "获取验证码";
            this.yanzmiao = 60;
            clearInterval(times);
          }
        }, 1000);
        var phon = wx.request({
          url: "https://api.zhaoshengku.net/index/login/sendvalidate",
          method: "post",
          data: {
            type: 2,
            user: parseInt(this.phoneUser)
          },
          success: res => {}
        });
      } else {
        return;
      }
    },
    forgetpass() {
      if (this.inputPassisshow) {
        return;
      }
      if (this.yanztwomima) {
        return;
      }
      wx.request({
        url: "https://api.zhaoshengku.net/index/login/retrievepwd",
        method: "post",
        data: {
          user: this.phoneUser,
          code: this.phonePass,
          pwd: this.inputPassTwo
        },
        success: res => {
          if (res.data.code == 200) {
            wx.showToast({
              title: "修改成功！",
              icon: "true",
              duration: 1000,
              mask: true
            });
            this.phoneUser = "";
            this.phonePass = "";
            this.inputPassTwo = "";
            setTimeout(() => {
              wx.navigateBack({
                delta: 1
              });
            }, 1000);
          } else {
            wx.showToast({
              title: res.data.msg,
              icon: "none",
              duration: 1500,
              mask: true
            });
          }
        },
        fail: res => {
          console.log(res);
          if (res.errMsg) {
            wx.showToast({
              title: "请检查网络连接！",
              icon: "none",
              duration: 1500
            });
          }
        }
      });
    },
    zzpasswold() {
      if (
        !/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/.test(this.inputPass)
      ) {
        this.inputPassisshow = true;
      } else {
        this.inputPassisshow = false;
      }
    },
    yanztwomimas() {
      if (this.inputPassTwo === this.inputPass) {
        this.yanztwomima = false;
      } else {
        this.yanztwomima = true;
      }
    }
  }
};
</script>

<style>
.forgetPass_p {
  width: 100%;
  height: 20rpx;
  background: #f2f2f2;
}
.forgetPass_ul {
  background: #fff;
  padding: 0 30rpx;
}
.forgetPass_ul > li {
  height: 85rpx;
  line-height: 85rpx;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dddddd;
  padding-top: 40rpx;
  position: relative;
}
.forgetPass_ul > li > img:nth-child(1) {
  width: 44rpx;
  height: 44rpx;
  margin-right: 21rpx;
}
.forgetPass_ul > li > input {
  font-size: 14px;
  font-weight: 400;
  color: rgba(153, 153, 153, 1);
  flex: 1;
}
.forgetPass_ul > li > p {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 0, 0, 1);
  line-height: 52px;
  position: absolute;
  right: 10rpx;
  bottom: -75rpx;
}
.forgetPass_ul > li > span {
  display: inline-block;
  font-size: 12px;
  font-weight: 400;
  color: rgba(34, 151, 212, 1);
  width: 199rpx;
  height: 70rpx;
  line-height: 70rpx;
  text-align: center;
  border: 1px solid #2297d4;
  border-radius: 10rpx;
}
.forgetPass_ul > li:last-child {
  border-bottom: none;
  width: 692rpx;
  height: 98rpx;
  margin: 0 auto;
  margin-top: 182rpx;
}
.forgetPass_ul > li:last-child > img {
  width: 692rpx;
  height: 98rpx;
}
.placeholder{
  color:#999;
}
input{
  color:#333;
}
</style>
